<template>
    <div id="record" class="center_div">  <!--隐藏html-->
        <!------------------------------------顶部查询栏-------------------------------->
        <div class="searchForm" style="margin-top: 1%;margin-left: 1%;">
            <el-form v-if="true" :inline="true" :model="searchForm" :label-position="label_position">

                <el-form-item :label="searchForm.callerid.label">
                    <el-select v-model="searchForm.callerid.value"
                               :placeholder="searchForm.callerid.placeholder||'请选择'"

                    >
                        <el-option
                                v-for="item in searchForm.callerid.options"
                                :key="item.ID"
                                :label="item.NAME"
                                :value="item.ID">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item :label="searchForm.calledid.label">
                    <el-select v-model="searchForm.calledid.value"
                               :placeholder="searchForm.calledid.placeholder||'请选择'"

                    >
                        <el-option
                                v-for="item in searchForm.calledid.options"
                                :key="item.ID"
                                :label="item.NAME"
                                :value="item.ID">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="searchForm.st.label">

                    <el-date-picker v-model="searchForm.st.value" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"

                                    style="width: 100%" placeholder="选择日期时间" :editable="false"
                                    :picker-options="pickerOptionsStart"
                                    @change="changeStart"></el-date-picker>
                </el-form-item>

                    <el-form-item :label="searchForm.et.label">

                        <el-date-picker v-model="searchForm.et.value" type="datetime" :editable="false"
                                        :picker-options="pickerOptionsEnd" value-format="yyyy-MM-dd HH:mm:ss"
                                        style="width: 100%"
                                        placeholder="选择日期时间" @change="changeEnd"></el-date-picker>
                    </el-form-item>


                    <el-form-item>
                        <el-button class="queryBtn dataManageBtn22BtnpPx" type="primary" @click="query(1)">查询
                        </el-button>
                    </el-form-item>

            </el-form>
            <!--三等分-->
            <el-form v-if="false" :inline="true" :model="searchForm" :label-position="label_position">
                <el-row :gutter="0">
                    <el-col v-bind="grid">
                        <el-form-item :label="searchForm.callerid.label">
                            <el-select v-model="searchForm.callerid.value"
                                       style="width: 120%"
                                       :placeholder="searchForm.callerid.placeholder||'请选择'"

                            >
                                <el-option
                                        v-for="item in searchForm.callerid.options"
                                        :key="item.ID"
                                        :label="item.NAME"
                                        :value="item.ID">
                                </el-option>
                            </el-select>
                        </el-form-item>

                    </el-col>
                    <el-col v-bind="grid">
                        <el-form-item :label="searchForm.calledid.label">
                            <el-select v-model="searchForm.calledid.value"
                                       style="width: 120%"
                                       :placeholder="searchForm.calledid.placeholder||'请选择'"

                            >
                                <el-option
                                        v-for="item in searchForm.calledid.options"
                                        :key="item.ID"
                                        :label="item.NAME"
                                        :value="item.ID">
                                </el-option>
                            </el-select>
                        </el-form-item>

                    </el-col>
                    <el-col v-bind="grid" :offset="-1">
                        <el-form-item :label="searchForm.st.label">

                            <el-date-picker v-model="searchForm.st.value" type="datetime"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            style="width: 120%"
                                            placeholder="选择日期时间" :editable="false" :picker-options="pickerOptionsStart"
                                            @change="changeStart"></el-date-picker>
                        </el-form-item>

                    </el-col>
                    <el-col v-bind="grid">
                        <el-form-item :label="searchForm.et.label">

                            <el-date-picker v-model="searchForm.et.value" type="datetime" :editable="false"
                                            :picker-options="pickerOptionsEnd" value-format="yyyy-MM-dd HH:mm:ss"
                                            style="width: 100%"
                                            placeholder="选择日期时间" @change="changeEnd"></el-date-picker>
                        </el-form-item>

                    </el-col>
                    <el-col v-bind="grid">
                        <el-form-item>
                            <el-button class="queryBtn dataManageBtn22BtnpPx" type="primary" @click="query(1)">查询
                            </el-button>
                        </el-form-item>

                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!----------------------------------中间表格栏---------------------------------->
        <div class="table-wrap" style="width: 98%;height: 70%">
            <!--:data="tableData"-->
            <el-table
                    fit
                    :data="tableData"
                    class="tableDataClass"
                    border
                    cell-class-name="dataManage18px"
                    :header-cell-style="headerCellClassName">

                <el-table-column align="center" v-for="title in tableTitle" :prop="title.prop" :label="title.label"
                                 :width="title.width">
                </el-table-column>
                <el-table-column
                        class="align-right"
                        width="320"
                        header-align="center"
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                        <el-button v-for="button in buttons" @click="deal(scope.row,button.value)"
                                   :type="button.type" class="dataManageFooterBtnMargin">{{button.label}}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!---------------------------------- 分页---------------------------------->
            <el-pagination
                    layout="total,prev, pager, next"
                    :current-page="pageNum"
                    :page-size="pageSize"
                    background
                    @current-change="changePageNum"
                    :total="total"
                    style="margin-bottom: 20px">
            </el-pagination>
        </div>

        <el-dialog
                width="40%"
                top="1%"
                title="视频播放"
                :visible.sync="dialogPlayVideo"
                append-to-body
                @close="closeDialog">
            <video id="videoPlayer" src="" controls='controls' autoplay='autoplay'></video>


        </el-dialog>

    </div>

</template>

<script>
  import AuditQuery from '@/api/dataManages//AuditQuery.js';

  export default {
    name: 'LogAuditManagement',
    props: {//父组件数据
      FleetId: Number,
      userId: Number,
      UserAccount: String,
    },

    data() {
      return {
        grid: {
          xl: 8,
          lg: 8,
          md: 12,
          sm: 24,
          xs: 24,
        },
        label_position: 'right',
        dialogPlayVideo: false,
        dataforms: [],
        rowsforms: [],
        searchForm: {
          callerid: {label: '主叫', value: '', type: 'select', prop: 'callerid', options: []},
          calledid: {label: '被叫', value: '', type: 'select', prop: 'calledid', options: []},
          st: {label: '开始时间', value: '', type: 'time', prop: 'starttime'},
          et: {label: '结束时间', value: '', type: 'time', prop: 'endtime'},
        },
        pickerOptionsStart: {},
        pickerOptionsEnd: {},
        tableTitle: [
          // {label: '序号', prop: 'index'},
          {label: '主叫', prop: 'una'},
          {label: '被叫', prop: 'dna'},
          {label: '开始时间', prop: 'st', width: '320'},
          {label: '结束时间', prop: 'et', width: '320'},
          {label: '时长', prop: 'length'},
        ],

        buttons: [{label: '播放', value: 'play', type: 'primary'}, {label: '下载', value: 'dld', type: 'primary'}],
        tableData: [],   //搜索结果
        tableData1: [
          {
            id: 1,
          }, {
            id: 1,
          }, {
            id: 1,
          },
        ],
        recentTableData: [],   //最近记录搜索结果
        typeMap: ['单呼', '组呼', '临时组呼', 'IP单呼', 'IP会议'],//呼叫类型Map
        total: 0,
        pageNum: 1,
        pageSize: 10,
      };
    },
    created() {
      this.changeDmgPage();
    },
    mounted() {
      this.queryUser();
      this.query(1);
    },
    methods: {
      changeDmgPage() {
        let w = window.screen.width;
        let h = window.screen.height;
        if (w == 1920) {
          if (h == 1080) {
            this.pageSize = 7;
          } else {
            this.pageSize = 10;
          }
        }
      },

      headerCellClassName() {
        return 'font-size:18px;color:#515A6E;padding:10px 0px 10px 0px !important;background:#F5F5F6;border:1px solid #EBEBEB';
      },
      //表格样式
      cellStyleClassName() {
        return 'font-size:13px;text-align:center;color:#606266;padding:5px 0px 5px 0px !important;border:1px solid #EBEBEB';
      },
      closeDialog() {
        this.currentRow = null;
        var video = document.getElementById('videoPlayer');
        video.pause();
      },
      /**
       * 查询被叫对讲组
       * */
      queryUser: function() {
        var condition = {
          'pageIndex': 1,
          'pageSize': 0,
          'type': 1,
          'fleetId': this.$store.getters.scsFleetId,
          'managePriv': this.$store.getters.managePriv,
          'userId': this.$store.getters.userId,
        };
        AuditQuery.queryUser(condition).then((res) => {
          if (res.success) {
            var data = res.obj.list;

            data.forEach(function(value) {
              value.NAME = value.name;
              value.NUMBER = value.uid;
            });
            data.push({'NAME': '全部', 'NUMBER': ''});

            this.searchForm.callerid.options = data;

            this.searchForm.calledid.options = data;

          } else {
            this.$message('获取用户请求错误');
          }
          console.info('%c 获取用户成功' + res, 'color:red');
        }).catch(res => {
          console.info('%c 获取失败', 'color:red');
        });

      },
      /**
       * 查询被叫对讲组
       * */
      queryGroup: function() {
        var condition = {
          'pageIndex': 1,
          'pageSize': 0,
          'type': 0,
          'fleetId': this.$store.getters.scsFleetId,
          'managePriv': this.$store.getters.managePriv,
          'userId': this.$store.getters.userId,
        };
        AuditQuery.queryGroup(condition).then((res) => {
          if (res.success) {
            var data = res.obj.userInfo;

            data.forEach(function(value) {
              value.NAME = value.name;
              value.NUMBER = value.uid;
            });

            data.push({'NAME': '全部', 'NUMBER': ''});
            this.searchForm.calledid.options = data;
            this.searchForm.groupOptions = data;

          } else {
            this.$message('获取群组请求错误');
          }
          console.info('%c 获取群组成功' + res, 'color:red');
        }).catch(res => {
          console.info('%c 获取失败', 'color:red');
        });

      },
      // 将时间戳转为时分秒
      formatSeconds(value) {
        var theTime = parseInt(value);// 秒
        var theTime1 = 0;// 分
        var theTime2 = 0;// 小时
        if (theTime > 60) {
          theTime1 = parseInt(theTime / 60);
          theTime = parseInt(theTime % 60);
          if (theTime1 > 60) {
            theTime2 = parseInt(theTime1 / 60);
            theTime1 = parseInt(theTime1 % 60);
          }
        }
        var result = '' + parseInt(theTime) + '秒';
        result = '' + parseInt(theTime1) + '分' + result;
        result = '' + parseInt(theTime2) + '时' + result;
        return result;
      },
      changeStart() { // 限制开始时间
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: (time) => {
            if (this.searchForm.st.value) {
              return time.getTime() < this.searchForm.st.value;
            }
          },
        });
      },

      changeEnd() { // 限制结束时间
        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          disabledDate: (time) => {
            if (this.searchForm.et.value) {
              return time.getTime() > (this.searchForm.et.value);
            }
          },
        });
      },
      query: function(pageNum) {
        console.info('%c 查询视频', 'color:red');
        this.pageNum = pageNum;

        var condition =
            {
              'pi': this.pageNum,
              'ps': this.pageSize,
              // "SENDERTYPE": '4',
              'senderOrReceiverType': '4',
              //视频通话
              //  "type":'2',
              'fid': this.$store.getters.scsFleetId,
              'st': this.searchForm.st.value || '',
              'et': this.searchForm.et.value || '',
              'uid': this.searchForm.callerid.value,
              'did': this.searchForm.calledid.value,
            };
        if (condition.st != '' && condition.st != null) {
          condition.st = this.GlobalFunc.GlaChangeDate(condition.st);
        }
        if (condition.endtime != '' && condition.endtime != null) {
          condition.et = this.GlobalFunc.GlaChangeDate(condition.et);
        }
        AuditQuery.queryVideoRecord(condition).then((res) => {
          if (res.success) {
            var data = res.obj.data;
            data.forEach(function(item) {
              item.length = this.formatSeconds((item.et - item.st) / 1000);
              item.st = this.GlobalFunc.timeFormatRow(item.st);
              item.et = this.GlobalFunc.timeFormatRow(item.et);
            }.bind(this));
            console.log('playvideo');
            this.tableData = data;
            this.total = res.obj.total;

          } else {
            this.$message('获取视频请求错误');
          }
          console.info('%c 获取视频成功' + res, 'color:red');
        }).catch(res => {
          console.info('%c 获取视频失败', 'color:red');
        });
      },
      deal: function(row, value) {

        console.info('%c deal' + row.fid, 'color:red');
        if (value === 'play') {
          let ipUrl = this.$store.getters.stateBaseUrl1604 + '/' + row.fid;

          //  let ipUrl = "http://192.168.0.201:1604" + '/' + row.fid;
          console.info('%c ipUrl=' + ipUrl, 'color:red');
          this.dialogPlayVideo = true;
          /* $('#videoPlayer').attr('src', ipUrl);
           var fry_audio = $('#videoPlayer').get('0');
           fry_audio.play();*/

          this.$nextTick(function() {
            let videoPlayer = document.getElementById('videoPlayer');
            videoPlayer.src = ipUrl;
          });

        } else if (value === 'dld') {

          this.handleFileDownland(row.fid, row.fid);
        }
      },
      /**
       * 文件下载
       * @param currentUrl
       */
      handleFileDownland(currentUrl, fileName) {

        let ipUrl = this.$store.getters.http + this.$store.getters.stateBaseUrlHostname +
            this.$store.getters.download_port + currentUrl;
        let a = document.createElement('a');
        document.body.appendChild(a);
        a.setAttribute('download', fileName);
        a.href = ipUrl;
        a.click();
        a.parentNode.removeChild(a); // 下载完成移除元素
      },
      /**
       * 处理下载url
       * @param str:字符串
       * @param c处理字符串
       * @param n出现位置
       */
      dealDownloadUrl(str, c, n) {
        let x = str.indexOf(c);
        for (let i = 0; i < n; i++) {
          x = str.indexOf(c, x + 1);
        }
        return x;

      },
      changePageNum: function(val) {
        this.pageNum = val;
        this.query(this.pageNum);
      },

    },
  };
</script>

<style scoped>
    /deep/ .el-form-item__label {
        font-size: 22px !important;
    }

    /deep/ .el-input__inner {
        font-size: 22px !important;
    }

    /*分页修改开始*/
    .el-pagination /deep/ .el-pagination__total {
        font-size: 20px;
        line-height: 60px;
    }

    .el-pagination /deep/ button /deep/ .el-icon .el-icon .el-icon-arrow-left {
        font-size: 50px;
        height: 60px;
        width: 40px;
    }

    /deep/ .el-pager li {
        margin-top: 15px;
        height: 60px;
        width: 60px;
        line-height: 60px;
        font-size: 18px;
    }

    /deep/ .el-pagination.is-background .btn-prev, .el-pager li {
        height: 60px;
        width: 60px;
    }

    /deep/ .el-pagination.is-background .btn-next, .el-pager li {
        height: 60px;
        width: 60px;
    }

    /deep/ .el-pagination .btn-prev .el-icon {
        font-size: 40px;
    }

    /deep/ .el-pagination .btn-next .el-icon {
        font-size: 40px;
    }

    /*分页修改结束*/
    #videoPlayer {
        width: 100%;
        height: 800px;
    }

    .el-table-column--selection .cell {
        padding-right: 1px;
    }


    #record .el-table__body-wrapper {
        overflow-y: auto !important;
    }


    .tableDataClass {
        width: 100%;
        height: 80%;
        text-align: center;
        border-left: 1px solid #EBEBEB;
        font-size: 16px
    }
</style>
